<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>动态视频详情</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/dynamic_video.css" />
</head>

<body>
  <div id="app" v-cloak>
    <div class="wrap flex-wrap flex-vertical">
      <div class="video-wrap">
      </div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var app, videoPlayer;
  apiready = function () {
    videoPlayer = api.require('videoPlayer');
    app = new Vue({
      el: '#app',
      data: {
        infoList: {},
        commentList: [],
      },
      created: function () {
        var _this = this;
        api.addEventListener({
					name: 'keyback'
				}, function (ret, err) {
          api.sendEvent({
            name: 'getDynamicList',
          });
					videoPlayer.close();
          api.closeWin();
				});
        api.addEventListener({
          name: 'videoPause'
        }, function(ret, err){
          videoPlayer.pause();
        });
        api.addEventListener({
          name: 'videoPlay'
        }, function(ret, err){
          videoPlayer.start();
        });
        api.addEventListener({
          name: 'closeVideo'
        }, function(ret, err){
          api.sendEvent({
            name: 'getDynamicList',
          });
          videoPlayer.close();
          api.closeWin();
        });
      },
      mounted: function () {
        var _this = this;
        _this.getDynamicDetail();
      },
      methods: {
        getDynamicDetail: function () {
					var _this = this;
          api.showProgress({
            title: '',
            text: '',
          });
					api.ajax({
						url: baseUrl + 'dynamic/detail',
						method: 'get',
						headers: {
							token: $api.getStorage('deviceToken')
						},
						data: {
							values: {
								uid: $api.getStorage('uid'),
								id: api.pageParam.id
							}
						}
					}, function (ret, err) {
            api.hideProgress();
            if (ret) {
              if (ret.status == 200) {
                _this.infoList = ret.data.info;
                _this.commentList = ret.data.list;
                _this.initVideoPlayer(_this.infoList.files[0].filename);
                setTimeout( function () {
                  _this.videoControl();
                }, 500);
              } else {
                api.toast({
                  msg: ret.message[0],
                  duration: 2000,
                  location: 'bottom'
                });
                setTimeout( function () {
                  api.closeWin();
                }, 1000);
              }
            }
					})
				},

        initVideoPlayer: function (path) {
          var _this = this;
          videoPlayer.open({
            rect: {
              x: 0,
              y: 0,
              w: api.winWidth,
              h: api.winHeight  
            },
            bg: '#000',
            path: path,
            scalingMode: 'scaleToFill',
          }, function (ret, err) {});
          videoPlayer.addEventListener({
            name: 'play'
          }, function(ret, err) {
            if (ret && ret.eventType == 'complete') {
              videoPlayer.start();
            }
          });
        },

        // 初始化video控制层
        videoControl: function () {
          api.openFrame({
            name: 'dynamic_detail_video_control',
            url: 'dynamic_detail_video_control.html',
            rect: {
              x: 0,
              y: 0,
              w: api.winWidth,
              h: api.winHeight
            },
            pageParam: {
              infoList: this.infoList,
              commentList: this.commentList
            }
          });
        },
        
      }
    })
  }
</script>